<template>
	<view>
		<!-- #ifdef H5 || MP-WEIXIN -->
		<uNavbar title="支付确认" bgColor="#F5F7F5"> </uNavbar>
		<!-- #endif -->

		<view class=" flex_ZC">
			<view class="money flex_ZC">
				<text class="money_txt">{{totalPrice}}</text>
				<text class="f28 c6">订单金额</text>
			</view>
			<!-- #ifdef H5 -->
			<view class="mart90">
				<view class="coupon flex_ld" @click="changeCoupons(item)" v-for="(item,index) in zhifuList">
					<view class="coupon_l flex_dq">
						<image :src="item.img" mode="aspectFill"></image>
						<text class="f30 c3">{{item.name}}</text>
					</view>
					<view class="coupon_r flex_dq">
						<image v-if="item.state" class="checkboxHead" :src="baseUrl + '/static/icon/i_xz.png'"
							mode="aspectFill">
						</image>
						<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>

			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="coupon flex_ld" @click="changeCoupons(item)" v-for="(item,index) in zhifuList2">
				<view class="coupon_l flex_dq">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="f30 c3">{{item.name}}</text>
				</view>
				<view class="coupon_r flex_dq">
					<image v-if="item.state" class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'"
						mode="aspectFill">
					</image>
					<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
					</image>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="coupon flex_ld" @click="changeCoupons(item)" v-for="(item,index) in zhifuList2">
				<view class="coupon_l flex_dq">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="f30 c3">{{item.name}}</text>
				</view>
				<view class="coupon_r flex_dq">
					<image v-if="item.state" class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'"
						mode="aspectFill">
					</image>
					<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
					</image>
				</view>
			</view>
			<!-- #endif -->
			<web-view v-if="tipshow" :src="pay_url"></web-view>
			<view class=" flex_c btn1 gradient1 mart86" @click="$u.debounce(confrimPay, 300)">
				<text class="f32 c0">确认支付</text>
			</view>
			<u-popup :show="RealShow" mode="center" @close="RealShow = false" closeable bgColor="transparent">
				<view class="prompt flex_ZC">
					<text class="f36">提示</text>
					<text class="prompt_tit">{{tipstxt}}</text>
					<view class="prompt_ntm flex_ld_a">
						<text @click="RealShow = false">取消</text>
						<text @click="goRealname">去实名</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		cloudPay,
	} from "../../api/cloudMall.js"
	import {
		payDeposit,
	} from "../../api/settled.js"
	import {
		localpay,
		paymentStatus,
		phonePay
	} from "../../api/local.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				id: '',
				totalPrice: 0,
				shopFlag: false,
				orderInfo: {},
				zhifuList: [{
					id: 2,
					name: '支付宝支付',
					state: true,
					img: 'https://images.fudiemall.com/static/icon/alipay.png',
					pay_way: 'alipay'
				}],
				zhifuList2: [{
						id: 1,
						name: '微信支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
						pay_way: 'wxpay'
					},

				],
				type: "",
				pay_way: "",
				pay_url: "",
				tipshow: false,
				isfrom: "",
				paydata: {},
				RealShow:false,
				tipstxt:""
			}
		},
		onLoad(e) {
			this.getEnv()
			// console.log(e);
			this.tipshow = false
			if (e) {
				this.type = e.type
				this.totalPrice = e.totalPrice
			}
			if (e.id) {
				this.id = e.id
				this.checkstatus()
			}

		},
		onShow() {
			if (this.type != 3) {
				this.checkstatus()
			}
		},
		methods: {
			goRealname(){
				this.RealShow=false
				uni.navigateTo({
					url:"/pageUser/myuser/realname"
				})
			},
			getEnv() {
				let isfrom;
				// 小程序环境判断

				// H5环境判断
				// #ifdef H5

				const ua = navigator.userAgent.toLowerCase();
				if (ua.match(/Alipay/i)) {
					isfrom = '支付宝浏览器';
					this.zhifuList = [{
						id: 2,
						name: '支付宝支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/alipay.png',
						pay_way: 'alipay'
					}, ]
					this.pay_way = "alipay"
				} else if (ua.match(/MicroMessenger/i)) {
					isfrom = '微信内置浏览器';
					this.zhifuList = [{
							id: 1,
							name: '微信支付',
							state: true,
							img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
							pay_way: 'wxpay'
						},

					]
					this.pay_way = "wxpay"
				} else {
					isfrom = '普通浏览器';
					this.zhifuList = [{
						id: 2,
						name: '支付宝支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/alipay.png',
						pay_way: 'alipay'
					}, ]
					this.pay_way = "alipay"
				}

				// #endif
				// #ifdef MP-WEIXIN
				this.zhifuList2 = [{
						id: 1,
						name: '微信支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
						pay_way: 'wxpay'
					},

				]
				this.pay_way = "wxpay"
				// #endif
				// #ifdef MP-ALIPAY
				this.zhifuList2 = [{
						id: 1,
						name: '支付宝支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/alipay.png',
						pay_way: 'alipay'
					},

				]
				this.pay_way = "alipay"
				// #endif
				this.isfrom = isfrom
				return isfrom;
			},
			checkstatus() {
				paymentStatus({
					id: this.id,
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						if (res.data.pay_status == 2) {
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/cloudCat/paySuccess?type=' + this.type
								})
							}, 1200)
						}
					}
				})
			},
			// 支付方式 
			changeCoupons(item) {
				this.pay_way = item.pay_way
				this.zhifuList.forEach((item) => item.state = false)
				item.state = true

			},
			confrimPay() {
				let data = {
					pay_way: this.pay_way,
				}
				if (this.type == 1 || this.type == 2) {
					data.id = this.id,
						data.latitude = uni.getStorageSync("latitude"),
						data.longitude = uni.getStorageSync("longitude")
				}
				if(this.type == 100){
					data.order_id = this.id
				}
				let request = ''
				if (this.type == 1) {
					request = cloudPay
				} else if (this.type == 2) {
					request = localpay
				} else if(this.type == 100){
					request = phonePay
				} else {
					request = payDeposit
				}
				request(data).then(res => {
					if (res.code == 1) {
						let paydata = {}

						// #ifdef MP-WEIXIN
						console.log(res, 'MP-WEIXIN');
						if (res.data.pay_data) {
							paydata = JSON.parse(res.data.pay_data.pay_info)
						} else {
							paydata = JSON.parse(res.data.pay_info)
						}
						uni.showLoading({
							title: "支付中",
							mask: true
						})
						console.log(paydata);
						uni.requestPayment({
							provider: "wxpay",
							appid: paydata.appId,
							timeStamp: paydata.timeStamp,
							package: paydata.package,
							paySign: paydata.paySign,
							signType: paydata.signType,
							nonceStr: paydata.nonceStr,
							success(res) {
								uni.hideLoading()
								uni.$u.toast('支付成功!')
								this.checkstatus()
								// setTimeout(() => {
								// 	uni.switchTab({
								// 		url: '/pages/index/mine'
								// 	})
								// }, 1200)
							},
							fail(e) {
								uni.hideLoading()
								if (e.errMsg == "requestPayment:fail cancel") {
									uni.$u.toast('支付已取消')
								} else {
									uni.$u.toast('错误：' + e.errMsg)
								}
							}
						})
						// #endif
						// #ifdef H5

						if (this.isfrom == '微信内置浏览器') {
							if (res.data.pay_data) {
								paydata = JSON.parse(res.data.pay_data.pay_info)
							} else {
								paydata = JSON.parse(res.data.pay_info)
							}
							uni.showLoading({
								title: "支付中",
								mask: true
							})
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
									"appId": paydata.appId, //公众号ID，由商户传入     
									"timeStamp": paydata.timeStamp, //时间戳，自1970年以来的秒数     
									"nonceStr": paydata.nonceStr, //随机串     
									"package": paydata.package,
									"signType": paydata.signType, //微信签名方式：     
									"paySign": paydata.paySign //微信签名 
								},
								function(res) {
									uni.hideLoading()
								});
						} else {
							uni.hideLoading()
							console.log(res.data.pay_data);
							if (res.data.pay_data) {
								window.location.href = res.data.pay_data.qr_code
							} else {
								console.log(res.data.qr_code);
								window.location.href = res.data.qr_code
							}
							// window.location.href = res.data.pay_data.qr_code || res.data.data.qr_code
						}
						// #endif
						// #ifdef MP-ALIPAY
						console.log(res, 'MP-ALIPAY');
						paydata = JSON.parse(res.data.pay_data.pay_info)
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
							tradeNO: paydata.tradeNO,
							success: res => {
								console.log(res);
								uni.hideLoading()
								if (res.resultCode == '9000') {
									this.checkstatus()
								} else if (res.resultCode == '6001') {
									uni.$u.toast('支付已取消!')
								}
							},
							fail: error => {
								console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
								uni.hideLoading()
								uni.$u.toast(JSON.stringify(error))
							},
						});
						// #endif
					}else if(res.code==1001) {
						this.tipstxt=res.msg
						this.RealShow=true
					}

				})

			}
		}
	}
</script>

<style scoped>
	.money {
		margin-top: 80rpx;
	}

	.money_txt {
		font-size: 76rpx;
		font-weight: 500;
		color: #333333;
	}

	.mart90 {
		margin-top: 90rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.coupon {
		width: 690rpx;
		height: 154rpx;
		padding: 0 48rpx;
	}

	.line {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.coupon_l>image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 24rpx;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.mart86 {
		margin-top: 86rpx;
	}
	
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	
	.prompt_ntm>text:nth-child(1) {
		
		width: 200rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #FFC300;
		border-radius: 40rpx;
		color: #FFC300;
	}
	
	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #FFC300;
		border-radius: 40rpx;
		color: #ffffff;
	}
	
</style>